<template>
  <div class="table-container">
    <el-form :model="searchForm" class="search-form" label-width="100px">
      <el-form-item label="记录时间" class="search-item">
        <el-date-picker
          v-model="searchForm.startDate"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['00:00:00', '23:59:59']"
        />
      </el-form-item>

      <el-form-item label="类型" class="search-item">
        <el-select v-model="searchForm.recordType" placeholder="选择类型">
          <el-option label="访问" value="access" />
          <el-option label="变更" value="change" />
          <el-option label="触发" value="trigger" />
        </el-select>
      </el-form-item>

      <el-form-item class="search-item">
        <div class="secrch-handle">
          <el-button type="primary" @click="search">搜索</el-button>
          <el-button @click="reset">重置</el-button>
        </div>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" stripe class="full-width-table">
      <el-table-column prop="id" label="ID" />
      <el-table-column prop="type" label="类型" />
      <el-table-column prop="description" label="记录描述" />
      <el-table-column prop="recordTime" label="记录时间" />
    </el-table>
  </div>
</template>

<script>
import { ref, computed } from "vue";

export default {
  setup() {
    const searchForm = ref({
      startDate: [new Date("2024-01-01"), new Date("2024-05-01")],
      recordType: "访问"
    });

    const tableData = ref([
      {
        id: 1,
        type: "访问",
        description: "用户(13515512133)查看了编号(20241000661)监控画面",
        recordTime: "2024-01-03 11:12:55"
      },
      {
        id: 2,
        type: "变更",
        description: "用户(vx2231)修改了系统设置(IP白名单)",
        recordTime: "2024-02-05 12:22:22"
      },
      {
        id: 3,
        type: "触发",
        description: "设备编号(20240000661)自动备份视频文件数据",
        recordTime: "2024-02-01 22:25:25"
      }
    ]);

    const filteredData = computed(() => {
      const [start, end] = searchForm.value.startDate;
      const recordType = searchForm.value.recordType;

      return tableData.value.filter(item => {
        const recordDate = new Date(item.recordTime);
        const inDateRange = recordDate >= start && recordDate <= end;
        const matchType = !recordType || item.type === recordType;
        return inDateRange && matchType;
      });
    });

    const search = () => {
      // 搜索逻辑，计算属性已处理
    };

    const reset = () => {
      searchForm.value.startDate = [
        new Date("2024-01-01"),
        new Date("2024-05-01")
      ];
      searchForm.value.recordType = "";
    };

    return {
      searchForm,
      tableData,
      filteredData,
      search,
      reset
    };
  }
};
</script>

<style scoped>
.el-form {
  width: 200px;
}
.el-select {
  width: 170px;
}
.table-container {
  margin: auto;
  margin-top: 30px;
}

.search-form {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.search-item {
  margin-right: 20px;
}

.full-width-table {
  width: 100%;
}
.secrch-handle {
  display: flex;
  flex-wrap: nowrap;
}
</style>
